<template>
  <div class="room-list-setting">
    <Breadcrumb :pathContent="content" />
     <div  class="addRoomBtn">
         <el-button type="primary" size="small"  @click.native.prevent="addRoom" >新增房型</el-button>
      </div>
    <div class="room-list-content">
      <el-form :rules="rules" :model="ruleForm">
        <el-form-item>
          <el-table :data="HoteltableData" style="width: 100%" min-height="250">
            <el-table-column prop="hotelName" label="酒店名称" >
            </el-table-column>
            <el-table-column prop="name" label="房间类型" >
            </el-table-column>
            <el-table-column prop="roomQuantity" label="房间数">
            </el-table-column>
            <el-table-column  label="操作">
              <template slot-scope="scope">
                <el-button @click.native.prevent="updateRoom(scope.row)" type="text" size="small">
                  编辑
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item style="margin-top: 20px;">
          <el-pagination @size-change="handleRoomSizeChange" @current-change="handleRoomCurrentChange" :current-page="RoomCurrentPage" :page-sizes="[10,20,30,40]" :page-size="pageSize" layout="total, prev , pager , next, sizes, jumper" :total="totalCounts">
          </el-pagination>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { getHomelList } from '@/public/js/room'
export default {
  name: 'Staff',
  data () {
    return {
      pageNum: 1,
      pageSize: 10,
      HoteltableData: [],
      totalCounts: 0,
      RoomCurrentPage: 1,
      hotelId: '',
      content: {
        firstTitle: '酒店',
        secondTitle: '房型信息',
        type: 'close'
      }
    }
  },
  created () {
    // getHomelList()
    window.commo.showMenu(this)
    this.getHomeListByHotelId()
    sessionStorage.removeItem('imgsData')
    sessionStorage.setItem('TabName', 'first')
  },
  mounted () {
  },
  methods: {
    // 根据酒店ID查询房型列表
    getHomeListByHotelId () {
      this.hotelId = this.$route.params.id
      let data = {
        'timestamp': 0,
        'version': 'string',
        'operation': 'string',
        'pageSize': this.pageSize,
        'pageNum': this.pageNum,
        'hotelId': this.hotelId
      }
      getHomelList(data).then(res => {
        console.log(res)
        if (!res.data.errCode) {
          this.HoteltableData = res.data.list
          this.totalCounts = res.data.total
        }
      })
    },
    // 页码操作
    handleRoomSizeChange (val) {
      this.pageSize = val
      this.getHomeListByHotelId()
      console.log('val', val)
    },
    handleRoomCurrentChange (val) {
      this.pageNum = val
      this.getHomeListByHotelId()
      console.log(val)
    },
    // 编辑房型
    updateRoom (roomInfo) {
      console.log(roomInfo)
      sessionStorage.setItem('roomId', roomInfo.id)
      // 路由跳转到 房型编辑页面
      this.$router.push({path: '/index/RoomUpdate', query: {roomId: roomInfo.id, hotelId: this.hotelId}})
    },
    // 新增房型
    addRoom () {
      this.$router.push({path: '/index/roomCreate', query: {hotelId: this.hotelId}})
    }
  }
}
</script>
<style lang="scss">
.addRoomBtn{
  padding:20px 20px 0 0;
  text-align: right
}
.room-list-content {
  background-color: white;
  padding: 20px;
  position: relative;
  font-size: 12px;
  color: #415161;
}
</style>
